<template>
  <view class="mine-pages-setting">
    <view class="flex-center flex-column pd-lg fill-base">
      <view class="space-lg"></view>
      <view class="space-lg"></view>
      <image class="avatar radius" :src="user_info.avatarUrl"></image>
      <view class="f-title c-caption mt-md" v-if="user_info.phone">
        {{ user_info.split_phone }}
      </view>
    </view>
    <view
      class="flex-between pd-lg fill-base f-paragraph"
      v-for="item in userInfoList">
      <view>{{ item.text }}</view>
      <view class="c-caption">{{ user_info[item.key] }}</view>
    </view>
    <view class="space-md"></view>
    <view
      @tap.stop="goDetail(index, 'infoList')"
      class="flex-between pd-lg fill-base f-paragraph"
      v-for="(item, index) in infoList"
      :key="index">
      <view>{{ item.text }}</view>
      <i class="iconfont icon-right"></i>
    </view>
    <view class="space-max-footer"></view>

    <!-- #ifdef APP-PLUS -->
    <fix-bottom-button
      @confirm="toLoginOut"
      :text="[{ text: '退出登录', type: 'confirm' }]"
      bgColor="#fff"></fix-bottom-button>
    <!-- #endif -->
  </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import siteInfo from "@/siteinfo.js";
export default {
  data() {
    return {
      isLoad: false,
      options: {},
      userInfoList: [
        {
          text: "昵称",
          key: "nickName",
        },
        {
          text: "注册时间",
          key: "create_date",
        },
      ],
      infoList: [
        {
          text: "用户隐私协议",
          url: 1,
        },
        {
          text: "个人信息保护指引",
          url: 2,
        },
      ],
      user_info: {},
    };
  },
  computed: mapState({
    primaryColor: (state) => state.config.configInfo.primaryColor,
    subColor: (state) => state.config.configInfo.subColor,
    userInfo: (state) => state.user.userInfo,
  }),
  async onLoad() {
    this.initIndex();
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    ...mapMutations(["updateUserItem"]),
    async initIndex() {
      this.$util.setNavigationBarColor({
        bg: this.primaryColor,
      });
      this.user_info = this.$util.deepCopy(this.userInfo);
    },
    goDetail(index, key) {
      let { siteroot } = siteInfo;
      let { url } = this[key][index];
      if (key == "infoList") {
        // #ifdef MP-WEIXIN
        this.$util.goUrl({
          url: `/user/pages/info?type=${url}`,
        });
        // #endif
        // #ifndef MP-WEIXIN

        let href = siteroot.split("index.php")[0];
        let page = url == 1 ? "protocol" : "information";
        url = `${href}${page}.html`;
        this.$util.goUrl({
          url,
          openType: "web",
        });
        // #endif
      }
    },
    toLoginOut() {
      let arr = ["autograph", "userInfo", "location", "appLogin"];
      arr.map((key) => {
        uni.setStorageSync(key, "");
        this.updateUserItem({
          key,
          val: "",
        });
      });
      this.$util.showToast({
        title: `退出登录`,
      });
      setTimeout(() => {
        let url = `/pages/service`;
        // #ifdef APP-PLUS
        url = `/pages/phone-login`;
        // #endif
        this.$util.goUrl({
          url,
          openType: `reLaunch`,
        });
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.mine-pages-setting {
  .iconfont {
    color: #999;
  }
}
</style>
